import React, { useEffect } from 'react';
import { Input, Row, Col, Radio, Select } from 'antd';
import FormItem from 'src/components/FormItem';

const { Option } = Select;

export default function(props) {
  const { name, code, status, remark, type } = props.value || {};

  const formItems = [
    {
      label: {
        label: '数据源名称',
        className: 'tantuer-form-item',
      },
      name: 'name',
      options: {
        initialValue: name,
        rules: [
          { required: true, message: '请输入数据源名称' },
          { pattern: /^[\u4E00-\u9FA5_a-zA-Z0-9]+$/, message: '限中英文数字下划线' },
          { max: 128, message: '最长128个字符' },
        ],
      },
      component: <Input placeholder='请填写数据源名称' disabled={props.actionType === 'detail'} />,
    },
    {
      label: {
        label: '数据源code',
        className: 'tantuer-form-item',
      },
      name: 'code',
      options: {
        initialValue: code,
        rules: [
          { required: true, message: '请输入数据源code' },
          { max: 128, message: '最长128个字符' },
          { pattern: /^[a-zA-Z][_a-zA-Z0-9]*$/, message: '限英文数字下划线，并以英文开头' },
        ],
      },
      component: (
        <Input
          placeholder='请填写数据源code'
          disabled={props.actionType === 'update' || props.actionType === 'detail'}
        />
      ),
    },
    {
      label: {
        label: '数据源类型',
        className: 'tantuer-form-item',
      },
      name: 'type',
      options: {
        initialValue: type,
        rules: [{ required: true, message: '请选择数据源类型' }],
      },
      component: (
        <Select disabled={props.actionType === 'detail'}>
          {props.dataSource_type.map((it) => {
            return (
              <Option value={it.key} key={it.key}>
                {it.value}
              </Option>
            );
          })}
        </Select>
      ),
    },
    {
      label: {
        label: '状态',
        className: 'tantuer-form-item',
      },
      name: 'status',
      options: {
        initialValue: status,
        rules: [{ required: true, message: '请选择状态' }],
      },
      component: (
        <Radio.Group disabled={props.actionType === 'detail'}>
          <Radio value={1}>启用</Radio>
          <Radio value={0}>禁用</Radio>
        </Radio.Group>
      ),
    },
    {
      label: {
        label: '描述',
        className: 'tantuer-form-item',
      },
      name: 'remark',
      options: {
        initialValue: remark,
        rules: [{ max: 256, message: '最长256个字符' }],
      },
      component: <Input placeholder='请输入简短描述，限256字' disabled={props.actionType === 'detail'} />,
    },
  ].filter(Boolean);

  return (
    <Row type='flex' gutter={20}>
      {formItems.map((item) => {
        return (
          <Col span={8} key={item.name}>
            <FormItem {...props} form={props.form} item={item} colNum={1} />
          </Col>
        );
      })}
    </Row>
  );
}
